<template>
<div>
  <h1>商品表添加</h1>
  <p>名称:<input type="text" v-model="form.name"></p>
  <p>价格:<input type="text" v-model="form.price"></p>
  <p>描述:<input type="text" v-model="form.account"></p>
<!--                       name是标记         id 选择器   -->
  <p>图片:<input type="file" name="pic" id="pic"></p>
  <p>店主
    <select name="" id="" v-model="form.shopkeeper">
      <option :value="i.id" v-for="i in shopkeep">{{i.name}}</option>
    </select>
  </p>
  <p>
    <button @click="add">添加</button>
  </p>
</div>
</template>

<script>
export default {
  name: "guoqing1",
  data(){
    return{
      form:{},
      shopkeep:[],
    }
  },
  methods:{
    add(){  //   获取id选择器                             获取图片二进制流
      let picture=document.getElementById('pic').files[0]
      let formData=new FormData
      formData.append('name',this.form.name)
      formData.append('price',this.form.price)
      formData.append('account',this.form.account)
      formData.append('picture',picture)
      formData.append('shopkeeper',this.form.shopkeeper)
      this.$axios.post('users/shop/',formData)
      .then(res=>{
        console.log(res.data)
      })
    },
    get_shopkeep(){
      this.$axios.get('users/shopkeep/')
      .then(res=>{
        console.log(res.data)
        this.shopkeep=res.data.list
      })
    },
  },
  mounted() {
    this.get_shopkeep()
  }
}
</script>

<style scoped>

</style>
